'use client'
import { Button } from '@/components/ui/button'
import { Edit, Trash } from 'lucide-react'
import { useCategories } from '@/app/(dashboard)/admin/foods-management/categories/_services/use-category-queries'
import { CategoryCardsSkeleton } from '@/app/(dashboard)/admin/foods-management/categories/_components/category-cards-skeleton'
import { alert } from '@/lib/use-global-store'
import { useDeleteCategory } from '@/app/(dashboard)/admin/foods-management/categories/_services/use-category-mutations'
import { useCategoriesStore } from '../_libs/use-category-store'

const CategoryCards = () => {
  const categoriesQuery = useCategories()
  const deleteCategoryMutation = useDeleteCategory()

  const { updateSelectedCategoryId, updateCategoryDialogOpen } = useCategoriesStore()
  return (
    <div className='grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4'>
      {categoriesQuery.isLoading ? (
        <CategoryCardsSkeleton />
      ) : (
        <>
          {categoriesQuery.data?.map(item => (
            <div
              key={item.id}
              className='bg-accent hover:bg-background-300 flex flex-col justify-between gap-3 rounded-lg p-6 shadow-md transition-all duration-200 ease-in-out'
            >
              <p className='truncate'>{item.name}</p>
              <div className='flex gap-1'>
                <Button
                  className='size-6'
                  variant='ghost'
                  size='icon'
                  onClick={() => {
                    updateSelectedCategoryId(item.id)
                    updateCategoryDialogOpen(true)
                  }}
                >
                  <Edit />
                </Button>
                <Button
                  className='size-6'
                  variant='ghost'
                  size='icon'
                  onClick={() =>
                    alert({
                      title: '删除分类',
                      description: '您确定要删除此分类吗?',
                      onConfirm: () => deleteCategoryMutation.mutate(item.id)
                    })
                  }
                >
                  <Trash />
                </Button>
              </div>
            </div>
          ))}
        </>
      )}
    </div>
  )
}

export { CategoryCards }
